<template>
  <v-container>
    <Breadcrumb />
    <DynamicTable 
		v-if="mindDisplayType === 'table'"
		:data="maps"
		:formData="formData"
		:columns="columns"
		@optEdit="openMap"
		@optDel="deleteMap"
    />
	<CardView
		v-if="mindDisplayType === 'card'"
		:maps="maps"
		:data="data"
		@optCreate="createMap"
		@optImport="importMind"
		@optEdit="openMap"
		@optDel="deleteMap"
		@exportMap="exportMap"
	/>

  </v-container>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import DynamicTable from '@/components/common/dynamicTable/index.vue';
import CardView from '@/components/common/cardView/index.vue'
import Breadcrumb from '@/components/common/breadcrumb/index.vue';
import { getMindList, deleteMindById, exportFile, getMindInfo, importFileForXmind } from '@/api'
import { changeCommonId, changeCurLabel, changeIsCreateGroup } from '@/assets/js/common'


const title = ref('mind')
let router = useRouter()
const formData = reactive({})
const data = reactive({
	isShowEntry: true,
	isShowBtn: true,
	isShowProgressLabel: true,
	isShowProgress: true,
})
let columns = ref([
    { prop: 'id', label: 'ID', dataKey: 'id', width: 100, sortable: true, fixed: false},
    { prop: 'title', label: '标题', dataKey: 'title', width: 300, fixed: false},
    { prop: 'progress_s', label: '冒烟进度', dataKey: 'text', width: 180},
    { prop: 'progress_t', label: '测试进度', dataKey: 'text', width: 180},
    { prop: 'create_time', label: '创建时间', dataKey: 'date', width: 180 },
    { prop: 'update_time', label: '更新时间', dataKey: 'date', width: 180 },
    { prop: 'create_by', label: '创建人', dataKey: 'text', width: 100 },
    { prop: 'update_by', label: '更新人', dataKey: 'text', width: 100 },
    { prop: '', label: '发布状态', dataKey: 'text', width: 120 },
    { prop: 'is_deleted', label: '状态', dataKey: 'state', width: '120' },
])
let maps = ref([])
let mindDisplayType = ref('card')

onMounted(async () => {
	changeCurLabel("用例管理")
	fetchMindMaps()
})


function createMap(){
	// 新建 Mind
	changeIsCreateGroup(true)
	router.push({name: 'mindCreate'})
}

function fetchMindMaps(){
	try {
		// 获取所有mind数据
		getMindList({order: 'create_time'}).then((res)=>{
			maps.value = res.data
		})
	} catch (error) {
	console.error('Error fetching mindmaps:', error)
	}
}
function openMap(id) {
	// 打开并编辑 Mind
	changeCommonId(id)
	changeIsCreateGroup(false)
	router.push({name: 'mindEdit', params: {id: id}})
}
function deleteMap(id) {
	if (confirm('确定要删除这个思维导图吗？')) {
		try {
			deleteMindById({id: id}).then((res) => {
				maps.value = maps.value.filter(map => map.id !== id)
				ElMessage({
						title: "Del MindMap",
						type: "primary",
						message: '删除成功'
				})
			})
		} catch (error) {
			console.error('Error deleting map:', error)
		}
	}
}
function exportMap(id) { 
	try {
		console.log('export id', id)
		ElMessage({
			title: "Export MindMap",
			type: "primary",
			message: '导出成功'
		})
	} catch (error) {
		console.error('Error exporting map:', error)
	}
}

function importMind(formFile) {
	try {
		importFileForXmind(formFile).then((res) => {
			router.go(0)
		})
	} catch (error) {
	console.error('Error importing mindmap:', error)
	}
}
</script>
